<template>
  <div>
    <a-modal
      title="区域选择"
      :visible="visible"
      @ok="handleOk"
      @cancel="visible = false"
    >
      <span>区域</span>
      <area-cascader v-model="areaPath" @area-change="onAreaChanged"></area-cascader>
      <div style="margin-top:15px">
      <span>经度</span>
      <a-input v-model="lon"></a-input>
      </div>
      <div style="margin-top:15px">
      <span>纬度</span>
      <a-input v-model="lat"></a-input>
      </div>
    </a-modal>
  </div>
</template>
<script>
//import AreaTree from "../dcfg/AreaTree.vue";
import AreaCascader from "../dcfg/AreaCascader.vue";
export default {
  components: {
    //AreaCascader
    //AreaTree,
    AreaCascader,
  },
  data() {
    return {
      area: {},
      station: {},
      areaPath: [],
      funSave: null,
      visible: false,
      lon:112,
      lat:222.11
    };
  },
  methods: {
    Show(station, fun) {
      //this.$store.dispatch()
      //this.$store.dispatch("area/refreshAreas")
      this.station = station;
      this.areaPath = station.area_id

      //this.areaID = areaID;
      this.funSave = fun;
      this.lat = station.lat
      this.lon = station.lon
      this.visible = true;
    },
    handleOk() {
      if (this.funSave) {
        console.log("area path-------------",this.areaPath)

        this.funSave(this.areaPath,this.lon,this.lat);
        this.visible = false;
      }
    },
    onAreaChanged(val1,val2){
      console.log("--------area-----",val1,val2)
      if(val2){
        this.lat = val2.lat
        this.lon = val2.lon
      }
    }
  },
};
</script>